<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap.css">
    <style>

        .box{
            width:50%;
            position: absolute;
            top:500px;
            opacity: 0;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <a href="javascript:;" class="btn btn-primary">Click</a>
        <div class="panel panel-danger box">
            <div class="panel-heading">
                Good Evening
            </div>
            <div class="panel-body">
                <ul class="list-group">
                    <li class="list-group-item">0001</li>
                    <li class="list-group-item">0002</li>
                    <li class="list-group-item">0003</li>
                    <li class="list-group-item">0004</li>
                </ul>
            </div>
            <div class="panel-footer panel-info">
                Hello World
            </div>
        </div>
    </div>
<script>
    var panel = document.querySelector('.panel');
    var btn = document.querySelector('.btn');
    var timer = null;
    var num = 0;
    btn.addEventListener('click', function(){
        timer = setInterval(function(){
            var top = panel.offsetTop;
            panel.style.opacity = 1 - top / 500;
            panel.style.top = top - 10 + 'px';
            if(top == 50){
                clearInterval(timer);
            }
        },1000 / 50);
    })

</script>

</body>
</html>